<template>
  <tl-sub-page :visible.sync="visible" v-dialogDrag :title="title" class="tl-dialog" :fullscreen="fullscreenState"  width="1200px" @open="open" @close="close" top="50px" :close-on-click-modal="false" :close-on-press-escape="false">
    <!-- 查询 -->
    <tl-list-search ref="search" style="margin:6px 0" :query-param="queryParam" @search="doQuery" :isDisplaySearch="false" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay">
      <template slot="search">
        <el-form-item class="qryItem" label="统计周期">
          <el-date-picker :picker-options="rangeOption"  v-model="startandenddate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changedate"></el-date-picker>
        </el-form-item>
        <el-form-item class="qryItem" label="项目级别">
          <el-select v-model="queryParam.projectlevel" style="width:200px;" multiple  clearable>
            <el-option v-for="item in codeModel.projectlevelList" :key="item.code" :label="item.name"  :value="item.code" clearable />
          </el-select>
        </el-form-item>
        <el-form-item class="qryItem" label="部门">
          <el-select v-model="queryParam.deptcommoncode"  multiple :collapse-tags="true" filterable clearable>
            <el-option v-for="item in codeModel.deptCommonCodeList" :key="item.code" :label="item.name" :value="item.code" clearable />
          </el-select>
        </el-form-item>
      </template>
      <template slot="search">
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="doQuery()">搜索</el-button>
      </template>
    </tl-list-search>
    <tl-list-toolbar ref="toolbar" @add="openAddDialog('editForm')" :isDisplayExport="false" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :disableDeleteBatch="selectedRowKeys.length <= 0" :isDisplayAdd="false" :isDisplayDeleteBatch="false">
      <template slot="left-btn">
        <el-button :loading="exLoading" class="filter-item" type="primary" icon="el-icon-download" @click="doNewExportExcel">导出</el-button>
        <el-button :loading="exLoading" class="filter-item" type="primary" icon="el-icon-full-screen" @click="showFullScreen" v-show="fullScreenButton">全屏显示</el-button>
      </template>
    </tl-list-toolbar>
    <el-table ref="mainTable" class="tl-table" :data="datas" border fit :resizable-refs="tableResizeRefs" :height="tableHeight" resizable-key="tableHeight" v-loading="loading" @sort-change="doSortChange">
      <el-table-column label="序号" prop="index" align="center" width="60px" type="index"></el-table-column>
      <el-table-column prop="dispdeptcommoncode" label="部门" sortable="custom" sort-by="deptcommoncode"  width="110px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="projectname" label="项目名称" sortable="custom" sort-by="projectname" width="300px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="projectcode" label="项目编号" sortable="custom" sort-by="projectcode" width="200px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispprojectlevel" label="项目级别" sortable="custom" sort-by="projectlevel" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="projectmanager" label="项目经理" sortable="custom" sort-by="projectmanager" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="projectcontent" label="督办内容" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="supervisetime" label="次数" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="responsiblename" label="被督办人" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispresponsibledeptcode" label="被督办部门" width="150px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="publishtime" label="发布时间" :formatter="dateFormat"  width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="superviseperiod" label="督办期限" sortable="custom" sort-by="superviseperiod" :formatter="dateFormat" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="responsestatus" label="响应状态" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="responsetime" label="响应时间" :formatter="dateFormat" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="supervisepeople" label="发起人" sortable="custom" sort-by="supervisepeople" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="ccstaffname" label="抄送人" sortable="custom" sort-by="ccstaffname" width="400px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="extramiletask" label="备注" width="300px" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
    </el-table>
     <!-- 列表分页 -->
      <el-row class="pagebar" ref="pager">
        <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
      </el-row>
  </tl-sub-page>
</template>
<script>
import { getAction, postAction } from '@tapui/utils/http'
import { validateNull } from '@tapui/utils/validate'
import { randomUUID } from '@tapui/utils/util'
import { formatDate } from '@tapui/utils/date'
import { mixin_list } from '@tapui/mixins/mixin_list'
import { mixin_multiheader_excel } from '@/mixins/mixin_multiheader_excel'
export default {
  name: 'BidScoreThreePhase',
  mixins: [mixin_list, mixin_multiheader_excel],
  data() {
    return {
      title: '督办单明细报表',
      visible: false,
      datas: [],
      url: {
        list: '/mpm/projectSupervise/dataWithSupervisionDatailForm',
        queryCodeList: '/mpm/projectSupervise/dataCodeList',
        exportExcel: '/mpm/projectSupervise/exportExcelForSupervise'
      },
      queryParam: {
        deptcommoncode: [],
        projectlevel: ['0', '1'],
        // viewProjectManager: false,
        startDate: formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 1), 'yyyy-MM-dd'),
        endDate: formatDate(new Date(new Date().getFullYear(), new Date().getMonth(), 31), 'yyyy-MM-dd')
      },
      get rangeOption() {
        // 解决默认写法 this 指向问题
        let that = this
        return {
          disabledDate(date) {
            let now = new Date()
            let tempdate = new Date(date)
            // 往年不控制 未来年份禁用
            if (now.getFullYear() > tempdate.getFullYear()) {
              return false
            } else {
              return now.getMonth() < tempdate.getMonth()
            }
          }
        }
      },
      startandenddate: [],
      reduceHeight: 150,
      exLoading: false,
       // 排序参数
      sorterInfo: {
        sidx: 'deptcommoncode asc, projectmanagercode asc, superviseperiod',
        sord: 'asc, id asc'
      },
      tableHeight: "450px",
      fullscreenState: false,
      fullScreenButton: true
    }
  },
  props: {
      projectinfo: {},
      render: {
        default: 'div',
        type: String
      }
    },
  computed: {
    randomid() {
      return function(key) {
        return key + randomUUID()
      }
    }
  },
  methods: {
    // 全屏参数
    showFullScreen() {
        this.$emit('showFullScreen')
      },
    open() {
    },
     openforNormal() {
      this.visible = true
      this.startandenddate.push(this.getNowMonthFirst())
      this.startandenddate.push(this.getNowMonthLast())
      this.changedate(this.startandenddate)
      this.queryParam.projectlevel = ['0', '1']
      this.queryParam.deptcommoncode = []
      this.pageInfo.currentPage = 1
      this.loadData()
    },
    close() {
      this.datas = []
      this.startandenddate = []
      this.queryParam.projectlevel = []
      this.queryParam.deptcommoncode = []
    },
    getNowMonthFirst() {
      const date = new Date()
      date.setDate(1)
      return formatDate(date, 'yyyy-MM-dd')
    },
    getNowMonthLast() {
      const date = new Date()
      const enddate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
      return formatDate(enddate, 'yyyy-MM-dd')
    },
    changedate(data) {
      if (validateNull(data)) {
        this.queryParam.startDate = null
        this.queryParam.endDate = null
      } else {
        this.queryParam.startDate = data[0]
        this.queryParam.endDate = data[1]
      }
    },
    /** 列表数据加载开始 */
    loadData(paramMap) {
      if (!this.url.list) {
        this.$tap.alert('请设置list地址!', 'warning')
        return
      }
      // 得到加载分页
      if (validateNull(paramMap) === false && Object.keys(paramMap).indexOf('currentPage') > -1) {
        this.pageInfo.currentPage = paramMap['currentPage']
      }
      if (!this.beforeLoadData()) return
      // 查询条件
      var params = this.getQueryParams()
      // 数据查询
      this.loading = true
      postAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            this.datas = res.result.dataList
            this.pageInfo.totalCount = res.result.totalCount
            // 初始化自定义列
            if (typeof this.$refs.toolbar !== 'undefined') {
              this.$refs.toolbar.doInitTableColumn()
            }
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.afterLoadData()
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    doNewExportExcel() {
       this.exLoading = true
       this.doExportExcel()
    },
    afterExportData() {
       this.exLoading = false
    }
  }
}
</script>

<style lang="scss" scoped></style>
